<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	const currentTab = ref(0);
	onLoad((query) => {
		// 动态设置导航栏标题
		if(query.photo === 'undefined') {
			uni.setNavigationBarTitle({
				title:  '自定义'
			});
		}else {
			uni.setNavigationBarTitle({
				title: query.photo || '自定义'
			});
		}
	})

	const colourclick = ref(0)

	//  支付
	const paymentClick = () => {

	}
</script>
<template>
	<view class="custom">
		<view class="pixel">
			<view class="top">
				<text class="tab" @click="currentTab = 0" :class="{ active: currentTab === 0 }">高清版</text>
				<text class="tab" @click="currentTab = 1" :class="{ active: currentTab === 1 }">免费版</text>
			</view>
		</view>
		<!-- 高清版-->
		<view class="bottom" v-if="currentTab === 0">
			<view class="actben">
				<view class="left">
					<image class="images" src="../../static/index.png" alt="Description"></image>
					<view class="preview">高清版预览图</view>
				</view>
				<view class="right">
					<image class="image" src="../../static/index.png" alt="Description"></image>
				</view>
				<view class="acceptance-rate">
					<image class="image" src="../../static/c.png" alt="Description"></image>
				</view>
			</view>

			<view class="switchs">
				<view class="one" @click="colourclick = 0">
					<image v-if="colourclick === 0" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
				<view class="one red" @click="colourclick = 1">
					<image v-if="colourclick === 1" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
				<view class="one white" @click="colourclick = 2">
					<uni-icons v-if="colourclick === 2" type="checkmarkempty" size="30"></uni-icons>
					<!-- <imageclass="image images" src="../../static/容器 422.png" alt="Description"></image> -->
				</view>
				<view class="one huai " @click="colourclick = 3">
					<image v-if="colourclick === 3" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
				<view class="one behind " @click="colourclick = 4">
					<image v-if="colourclick === 4" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
			</view>

			<view class="payment" @click="paymentClick">
				¥9.99（高清美颜电子版）
			</view>
			<view class="member">
				3天免费重拍；购买当天开始，3个自然天内，不满意重拍，虚拟物品不支持退款
			</view>
		</view>

		<!-- 免费版 -->
		<view class="bottom" v-if="currentTab === 1">
			<view class="actben">
				<view class="left">
					<image class="images behinds" src="../../static/index.png" alt="Description"></image>
					<view class="preview">免费版预览图</view>
				</view>
				
			</view>

			<view class="switchs">
				<view class="one" @click="colourclick = 0">
					<image v-if="colourclick === 0" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
				<view class="one red" @click="colourclick = 1">
					<image v-if="colourclick === 1" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
				<view class="one white" @click="colourclick = 2">
					<uni-icons v-if="colourclick === 2" type="checkmarkempty" size="30"></uni-icons>
					<!-- <imageclass="image images" src="../../static/容器 422.png" alt="Description"></image> -->
				</view>
				<view class="one huai " @click="colourclick = 3">
					<image v-if="colourclick === 3" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
				<view class="one behind " @click="colourclick = 4">
					<image v-if="colourclick === 4" class="image" src="../../static/d.png" alt="Description">
					</image>
				</view>
			</view>

			<view class="payment" @click="paymentClick">
				免费下载
			</view>
			<view class="member btns">
				清晰度较差，建议使用高清版
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">

	.custom {
		width: 100%;
		height: 100%;

		.bottom {
			border-top: 1px solid #eee;
			.member {
				width: 670rpx;
				height: 96rpx;
				margin-left: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: left;
				text-transform: none;
			}
			.btns {
				text-align: center;
			}

			.payment {
				width: 670rpx;
				height: 120rpx;
				background: #028DFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-left: 40rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 120rpx;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.switchs {
				width: 670rpx;
				height: 88rpx;
				margin: 60rpx 40rpx;
				display: flex;
				justify-content: space-between;

				.images {}

				.image {
					width: 56rpx;
					height: 56rpx;

				}

				.one {
					width: 88rpx;
					height: 88rpx;
					background: #568CD5;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

				}

				.red {
					background: #EA3323;
				}

				.white {
					background: #FFFFFF;
					border: 2px solid #eee;
				}

				.huai {
					background: #9E9E9E;
				}

				.behind {
					background: #7CC3FA;
				}
			}

			.actben {
				height: 750rpx;
				background: #F7F7F7;
				position: relative;
				display: flex;
				justify-content: space-around;
				padding-top: 60rpx;


			}

			.acceptance-rate {
				position: absolute;
				right: 200rpx;
				bottom: 240rpx;
				width: 200rpx;
				height: 200rpx;

				// border: 1px dashed #eee;
				.image {
					width: 100%;
					height: 100%;
				}
			}

			.left {
				position: relative;
				width: 400rpx;
				height: 600rpx;
				background-color: #fff;

				.preview {
					position: absolute;
					bottom: 10rpx;
					left: 0%;
					width: 388rpx;
					height: 100rpx;
					background: rgba(58, 124, 248, 0.6);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 100rpx;
					text-align: center;
				}

				.images {
					width: 97%;
					height: 97%;
					margin-top: 6rpx;
				}
				.behinds {
					object-fit: cover;
					filter: blur(1px); /* 调整模糊程度 */
				}
			}

			.right {
				width: 310rpx;
				height: 200rpx;
				background-color: #3A7CF8;
				margin-top: 150rpx;

				.image {
					width: 100%;
					height: 100%;
				}

			}

		}

		.pixel {
			width: 100%;
			height: 105rpx;
			// background-color: #eee;

			.top {
				width: 100%;
				height: 96rpx;

				.active {
					border-bottom: 10rpx solid #3A7CF8;
					color: #3A7CF8;
				}

				.tab {
					display: inline-block;
					width: 375rpx;
					font-weight: 400;
					height: 100%;
					font-size: 36rpx;
					color: #999999;
					text-align: center;
					line-height: 96rpx;



				}
			}


		}

	}
</style>